<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Cyrine MALEK - Graphiste - Logo</title>
		<script src="js/anicolas/M4.js"></script>
		<script src="js/anicolas/M4Tween.js"></script>
		<script src="js/anicolas/Stage.js"></script>
		<style>
			@font-face{font-family: 'DinReg';font-style: normal;font-weight: normal;src: url('font/DINPro-Regular.otf') format('opentype');}
			@font-face{font-family: 'Pacifico';font-style: normal;font-weight: normal;src: url('font/Pacifico.ttf') format('truetype');}
			body{background:#ffffff;}
			.skill{width:112px;height:145px;position:relative;float:left;margin-right:10px;}
			.skill canvas{position:absolute;top:0;left:0;}
			.skill .value{position:absolute;text-align: center;width:112px;top:22px;font-family: Pacifico, serif;font-size:35px;}
			.skill .value span{font-size:21px;}
			.skill .name{font-family: DinReg, sans-serif;font-size:15px;color:#424241;width:112px;text-align: center;position:absolute;bottom: 0;}
		</style>
	</head>
	<body onload="init()">
		<script>

			function Skill(pEl)
			{
				this.parent = pEl;
				this.value = this.parent.dataset.value;
				this.name = this.parent.dataset.name;
				this.color = this.parent.dataset.color||"rgb(0, 0, 0)";
				this.debug = this.parent.dataset.debug||false;
				this.stage = new Stage(Skill.OUTSIDE_RADIUS<<1, Skill.OUTSIDE_RADIUS<<1, this.parent);
				this.coef = 0;

				this.startAngle = -90;

				if(this.debug)
					this.stage.addChild(new FPS());

				this.htmlValue = M4.createElement("div", {"class":"value"});
				this.parent.appendChild(this.htmlValue);
				this.htmlName = M4.createElement("div", {"class":"name", "text":this.name});
				this.parent.appendChild(this.htmlName);

				this.draw();

				this.helloWorld();
			}

			Class.define(Skill, [Class],
			{
				draw:function()
				{
					var center = new Vector(Skill.OUTSIDE_RADIUS, Skill.OUTSIDE_RADIUS);

					var currentAngle = this.coef *(360 * (this.value/100));
					var radius = Skill.INSIDE_RADIUS+((Skill.OUTSIDE_RADIUS - Skill.INSIDE_RADIUS)>>1);
					var angle = (((currentAngle) + this.startAngle)-Skill.THIRDPOINT_ANGLE) * M4.geom.DEGREE_TO_RADIAN;
					var p = new Vector(center.x+(radius * Math.cos(angle)), center.y+(radius * Math.sin(angle)));
					this.stage.clear();
					this.stage.beginFill(Skill.BACKGROUND_COLOR);
					this.stage.drawArc(center.x, center.y, Skill.OUTSIDE_RADIUS, 0, 360);
					this.stage.drawArc(center.x, center.y, Skill.INSIDE_RADIUS, 360, 0, true);
					this.stage.endFill();
					this.stage.beginFill(this.color);
					this.stage.drawArc(center.x, center.y, Skill.OUTSIDE_RADIUS, this.startAngle, currentAngle + this.startAngle);
					this.stage.lineTo(p.x, p.y);
					this.stage.drawArc(center.x, center.y, Skill.INSIDE_RADIUS, currentAngle + this.startAngle, this.startAngle, true);
					this.stage.endFill();
					this.htmlValue.innerHTML = Math.round(this.coef * this.value)+"<span>%</span>";
					if(this.coef === 1)
						this.stage.pause();
				},
				helloWorld:function()
				{
					var ano = M4.proxy(this, this.draw);
					M4Tween.to(this, 2 * (this.value/100), {coef:1, useStyle:false}).onUpdate(ano).onComplete(ano);
				}
			});

			Skill.OUTSIDE_RADIUS = 56;
			Skill.INSIDE_RADIUS = 48;
			Skill.THIRDPOINT_ANGLE = 4;
			Skill.BACKGROUND_COLOR = "rgb(191, 191, 191)";

			function init()
			{
				document.querySelectorAll(".skill").forEach(function(element){new Skill(element);});
			}

			NodeList.prototype.forEach = Array.prototype.forEach;


		</script>
		<div id="skills">
			<div class="skill" data-value="85" data-name="Photoshop" data-color="rgba(74, 136, 166, 1)"></div>
			<div class="skill" data-value="80" data-name="Illustrator" data-color="rgba(215, 152, 53, 1)"></div>
			<div class="skill" data-value="75" data-name="Indesign" data-color="rgba(206, 91, 131, 1)"></div>
			<div class="skill" data-value="60" data-name="AfterEffect" data-color="rgba(71, 71, 71, 1)"></div>
			<div class="skill" data-value="55" data-name="Flash" data-color="rgba(212, 81, 81, 1)"></div>
		</div>
	</body>
</html>